<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
    <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
            <tip>填写登录账号</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" checked="">
            <input type="radio" name="sex" value="0" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">手机</label>
        <div class="layui-input-block">
            <input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">邮箱</label>
        <div class="layui-input-block">
            <input type="email" name="email" lay-verify="required" lay-reqtext="邮箱不能为空" placeholder="请输入邮箱" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">角色信息</label>
        <div class="layui-input-block">
            <div id="roleId" class="roleId"></div>
        </div>
    </div>

    <div class="layui-form-item" style="margin: 25px 10px;position:absolute;bottom: 0;right: 5%;">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:parent.layer.close(parent.layer.getFrameIndex(window.name));">取消</button>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/xm-select/xm-select.js"></script>
<script type="text/javascript" src="/common/blog-ui.js"></script>
<script>
    var demo2 = xmSelect.render({
        el: '#roleId',
        radio: true,
        clickClose: true, //点击之后关闭
        theme: {
            color: '#0081ff',
        },
        //查询数据包括全部，需要过滤掉全部数据，即第一个数据
        data: getRoleSelect().filter((val,index,arr)=>{
            return index !== 0;
        })
    })


    /**
     * 获取角色的xm-select下拉选
     * @param
     * @return
     */
    function getRoleSelect(){
        var data;
        $.ajax({
            url: "/user/admin/getRoleSelect",
            type: "get",
            async: false,
            success(res){
                if (res.state){
                    data = res.data;
                }
            },
            error(res){
                console.log(res);
            }
        })
        return data;
    }

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var roleId = demo2.getValue('valueStr');
            if (roleId === ''){
                demo2.warning();
                Pt.showFormWarnMsg("请填写角色信息")
            }
            const formData = {
                username: data.field.username,
                sex: data.field.sex,
                phone: data.field.phone,
                email: data.field.email,
                roleId: roleId
            }
            console.log(":========",formData);
            saveUser(formData);
        });

    });

    /**
     * 保存用户信息
     * @param data
     * @return
     */
    function saveUser(data){
        $.ajax({
            url: "/user/admin/saveUser",
            type: "post",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            success(res) {
                if(res.state){
                    parent.layui.table.reload('userTable');
                    parent.layer.closeAll();
                }
            },
            error(res) {
                console.log(res)
            }
        })
    }
</script>
</html>